<template>
  <el-form label-position="top" :model="form" :rules="formRule" ref="form">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="First Name" prop="firstName">
          <el-input v-model="form.firstName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="Last Name" prop="lastName">
          <el-input v-model="form.lastName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="Address Line 1" prop="addressLine1">
      <el-input v-model="form.addressLine1"></el-input>
    </el-form-item>
    <el-form-item label="Address Line 2 - Optional" prop="addressLine2">
      <el-input v-model="form.addressLine2"></el-input>
    </el-form-item>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="City" prop="city">
          <el-input v-model="form.city"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="Zip - Optional" prop="zip">
          <el-input v-model="form.zip"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="State" prop="state">
          <el-input v-model="form.state"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="Country" prop="countryCode">
          <el-select v-model="form.countryCode" filterable  style="width: 100%">
            <el-option
                v-for="item in countryList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import json from './country-code.json'
export default {
  name: "addAddressForm",
  props: ['address'],
  data () {
    return {
      countryList: json,
      form: {
        firstName: '',
        lastName: '',
        addressLine1: '',
        addressLine2: '',
        city: '',
        state: '',
        zip: '',
        country: '',
        countryCode: ''
      },
      formRule: {
        firstName: [
          { required: true, message: 'Please Enter', trigger: 'blur' }
        ],
        lastName: [
          { required: true, message: 'Please Enter', trigger: 'blur' }
        ],
        addressLine1: [
          { required: true, message: 'Please Enter', trigger: 'blur' }
        ],
        // addressLine2: [
        //   { required: true, message: 'Please Enter', trigger: 'blur' }
        // ],
        city: [
          { required: true, message: 'Please Enter', trigger: 'blur' }
        ],
        state: [
          { required: true, message: 'Please Enter', trigger: 'blur' }
        ],
        // zip: [
        //   { required: true, message: 'Please Enter', trigger: 'blur' }
        // ],
        countryCode: [
          { required: true, message: 'Please Enter', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'form.countryCode' (val) {
      if (val) {
        this.form.country = this.countryList.find(item => item.code === val).name
      }
    },
    address: {
      handler (val) {
        this.form = Object.assign({}, {
          firstName: val.first_name,
          lastName: val.last_name,
          addressLine1: val.line1,
          addressLine2: val.line2,
          city: val.city,
          state: val.state,
          zip: val.zip,
          country: val.country ? this.countryList.find(item => item.code === val.country).name : null,
          countryCode: val.country
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submit() {
      return this.$refs['form'].validate();
    },
    resetForm() {
      this.$refs['form'].resetFields();
    }
  },
  created () {
  }
}
</script>

<style scoped lang="scss">

</style>